<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <!-- 面包屑 -->
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          class="BreadcrumbNav"
          v-if="$route.query.name"
        >
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 头部部分 -->
        <div class="header-box">
          <div class="header-left">
            <el-form :inline="true" :model="queryList" class="demo-form-inline">
              <el-form-item label="标签名称">
                <el-input v-model="queryList.tagName" size="small"></el-input>
              </el-form-item>
              <el-form-item label="状态" label-width="80px">
                <el-select v-model="queryList.state" placeholder="请选择">
                  <el-option label="已启用" :value="1"> </el-option>
                  <el-option label="已禁用" :value="0"> </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button @click="clearSearch" size="small">清除</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="loadList" size="small"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="header-right">
            <el-button
              type="text"
              icon="el-icon-back"
              v-if="$route.query.id"
              @click="$router.back()"
              >返回学科</el-button
            >
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              @click="addDialogVisible = !addDialogVisible"
            >
              新增标签
            </el-button>
          </div>
        </div>
        <!-- /头部部分 -->

        <!-- 信息提示的文案 -->
        <el-alert
          :title="`数据一共${counts}条`"
          type="info"
          show-icon
          :closable="false"
          class="info"
        >
        </el-alert>
        <!-- /信息提示的文案 -->

        <!-- 标签列表页    main -->
        <el-table :data="directoryList" style="width: 100%" class="table-box">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
          ></el-table-column>
          <el-table-column prop="tagName" label="标签名称"> </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>

          <el-table-column label="状态">
            <template slot-scope="scope">
              {{ scope.row.state ? "已启用" : "已禁用" }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope" class="manipulate" width="160">
              <el-button type="text" @click="editButton(scope.row)">
                {{ scope.row.state ? "禁用" : "启用" }}
              </el-button>
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="
                  editDirectorys(
                    scope.row.id,
                    scope.row.subjectID,
                    scope.row.tagName
                  )
                "
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="deleteHandler(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- /学科列表页 -->

        <!-- 分页 -->
        <div class="block">
          <el-pagination
            background
            :current-page.sync="currentPage1"
            :page-sizes="[5, 10, 20, 50]"
            layout="prev, pager, next, sizes,jumper"
            :total="counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
        <!-- 分页 -->

        <!-- 展示弹出层 -->
        <!-- 标签添加 -->
        <tags-add
          :addDialogVisible="addDialogVisible"
          @close="closefn"
          @shuaxin="shuaxin"
          v-if="addDialogVisible"
        >
        </tags-add>
        <!-- 标签添加 -->

        <!-- 标签修改 -->
        <TagsAlt
          :editDialogVisible="editDialogVisible"
          v-if="editDialogVisible"
          :id="id"
          :subjectID="subjectID"
          :tagName="tagName"
          @close="closeAlt"
          @shuaxin="shuaxinAlt"
        >
        </TagsAlt>
        <!-- /标签修改 -->

        <!-- /展示弹出层 -->
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  list,
  // add,
  remove,
  // update,
  changeState,
  simple
} from "@/api/hmmm/tags"; // 获取标签列表数据
// import DireAdd from "../../module-hmmm/components/directorys/directorys-add.vue";
import TagsAdd from "../components/tags-add.vue";
import TagsAlt from "../components/tags-alter.vue";
export default {
  name: "TagsIndex",
  data() {
    return {
      // button的开关状态
      isDisabled: false,

      // 分页器默认显示第一页
      currentPage1: 1,

      // 标签列表数据
      directoryList: [],

      // 简单列表数据
      addFrom: [],

      // 标签总数
      counts: 0,

      // 查询列表的参数体(用于获取默认标签列表)
      queryList: {
        page: 1,
        pagesize: 10,
        directoryName: null,
        state: null,
        tagName: null
      },

      // 新增弹窗的状态显示
      addDialogVisible: false,

      // 修改弹窗的状态显示
      editDialogVisible: false,

      id: 0,
      tagName: "",
      subjectID: null
    };
  },
  created() {
    this.getList();
  },
  components: { TagsAdd, TagsAlt },
  methods: {
    // 获取标签数据列表
    async loadList() {
      try {
        if (this.subjects.id) {
          this.queryList.subjectID = this.subjects.id;
        }
        const { data } = await list(this.queryList);
        console.log(data);

        this.directoryList = data.items;
        this.counts = data.counts;
      } catch (err) {
        this.$message.error("请求数据失败");
      }
    },

    // 获取简单数据列表
    async getSimpleDate() {
      try {
        const { data } = await simple(null);
        this.addFrom = data;
      } catch (err) {
        this.$message.error("请求数据失败");
      }
    },

    //  点击修改按钮，准备好真正请求的数据
    async editDirectorys(id, subjectID, tagName) {
      // 打开弹出层
      this.editDialogVisible = true;

      (this.id = id), (this.subjectID = subjectID), (this.tagName = tagName);
    },

    // 删除标签
    async deleteHandler(val) {
      const configRuselt = await this.$confirm(
        "此操作将永久删除该学科, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      console.log(configRuselt);
      if (configRuselt !== "confirm") {
        return this.$message("您取消了删除操作!");
      }
      try {
        const { data } = await remove(val);
        console.log(data);
        this.$message.success("删除成功");
        this.loadList();
      } catch (err) {
        this.$message.error("删除失败");
      }
    },
    // 修改禁用 启用状态
    async editButton(obj) {
      try {
        const { data } = await changeState({
          id: obj.id,
          state: obj.state === 1 ? 0 : 1
        });
        console.log(data);
        this.$message.success("操作成功");
        obj.state = obj.state === 1 ? 0 : 1;
      } catch (err) {
        this.$message.error("请求数据失败");
      }
      this.isDisabled = !this.isDisabled;
    },

    closefn() {
      // 子组件让其父组件关闭弹层
      this.addDialogVisible = false;
    },

    // 头部条件搜索
    clearSearch() {
      this.queryList.tagName = "";
      this.queryList.state = null;
      this.loadList();
    },
    // 分页器按需显示每页的条数
    handleSizeChange(val) {
      this.queryList.pagesize = val;
      this.loadList();
    },
    // 分页器获取页码值
    handleCurrentChange(val) {
      this.queryList.page = val;
      this.loadList();
    },
    // 添加之后刷新页面
    shuaxin() {
      this.handleCurrentChange(1);
    },
    // 修改弹层关闭
    closeAlt() {
      // 关闭修改弹出层
      this.editDialogVisible = false;
    },
    // 修改之后刷新页面
    shuaxinAlt() {
      this.handleCurrentChange();
    }
  },

  // 初始化钩子函数
  created() {
    // 获取初始的标签列表数据
    this.loadList();
    //初始化请求简单数据
    this.getSimpleDate();
    // 准备修改数据的值
  },
  computed: {
    subjects() {
      return this.$route.query || null;
    }
  },
  async getList() {
    console.log(this.$router.query.id);
    await list(this.$router.query.id);
    this.directoryList = data.items;
    this.counts = data.counts;
  }
};
</script>

<style scoped lang="scss">
.dashboard-container {
  .BreadcrumbNav {
    padding: 0 0 20px 0;
    border-bottom: 1px solid #ebeef5;
  }
  .header-box {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }

  .table-box {
    .manipulate {
      width: 240px;
      display: flex;
      justify-content: space-around;
    }
  }

  .block {
    margin-top: 20px;
  }

  .info {
    margin-bottom: 15px;
  }

  .subspan {
    margin-right: 25px;
  }
  .tar {
    text-align: right;
  }
  .header-box {
    ::v-deep .demo-form-inline {
      float: left;
    }
    ::v-deep .header-right {
      float: right;
    }
  }
}
</style>
